
<template >
  <ul class="nav-wrapper" >
    <li v-for="(news, index)  in newData" :key="index"
        :class="{'active': newData === index}" @click="_turnCase(news)">
       {{news.label}}
    </li>
  </ul>
     <!--class="nav-wrapper" v-for="(item, index)  in newData" @click="_turnCase(item)"-->
<!--  <ul class="nav-wrapper"  >
    &lt;!&ndash;<li><router-link to="/home" v-for="item  in newData" @click="_turnCase(item)">{{item.bean.name}}}</router-link></li>&ndash;&gt;
    &lt;!&ndash;<li><router-link to="/home">功能示例</router-link></li>
    <li><router-link to="/home">功能示例</router-link></li>
    <li><router-link to="/home">功能示例</router-link></li>
    <li><router-link to="/home">功能示例</router-link></li>
    <li><router-link to="/home">功能示例</router-link></li>
    <li><router-link to="/home">功能示例</router-link></li>
    <li><router-link to="/home">功能示例</router-link></li>&ndash;&gt;
  </ul>-->
</template>

<script  type="text/ecmascript-6">
  import * as exampleApi from 'api/example'
  export default {
    name: 'posts',
    data() {
      return {
        newData: [],
        det: {},
        getSingList: []
      }
    },
    created() {
      this._initLiteracy()
    },
    methods: {
      _initLiteracy(val) {
        let orgId = sessionStorage.getItem('siteId')
        this.text = val
        exampleApi.modePost('/api/public/sys/orgDict/list', {
          orgId: orgId,
          type: 'actype'
        }).then(
          res => {
            this.newData = res.data.data
          }
        )
      },
      _turnCase(news) {
        this.$router.push({
          path: `/activity${news.value}`
        })
      }
    }

  }

</script>



<style scoped lang="less" >

  .nav-wrapper{
    display: flex;
    width: 100%;
    height: 330px;
    background-color: #ffffff;
    flex-wrap: wrap;
    li{
      width: 25%;
      height: 165px;
      box-sizing:border-box;
      padding-top: 125px;
      background: url('../assets/image/icon/icon_nav_1.png') no-repeat;
      background-size: 80px 93px;
      background-position: center 19px;
      text-align: center;
      font-size: 20px;
      color: #7e8c8d;
      &:nth-child(2) {
        background-image: url('../assets/image/icon/icon_nav_2.png')
      }
      &:nth-child(3) {
        background-image: url('../assets/image/icon/icon_nav_3.png')
      }
      &:nth-child(4) {
        background-image: url('../assets/image/icon/icon_nav_4.png')
      }
      &:nth-child(5) {
        background-image: url('../assets/image/icon/icon_nav_6.png')
      }
      &:nth-child(6) {
        background-image: url('../assets/image/icon/icon_nav_7.png')
      }
      &:nth-child(7) {
        background-image: url('../assets/image/icon/icon_nav_8.png')
      }
      &:nth-child(8) {
        background-image: url('../assets/image/icon/icon_nav_9.png')
      }
    }
  }

</style>
